@charset "UTF-8";

/*=================
    HEADER START
==================*/

#header{
    height:100px;
}

/*======= logo strat ========*/
#header .logo h1{
    font-size: 0;
    width:55px;
    height:55px;
    margin-top: 22px;
    background:#ff6700 url("../images/head-nav/logo.png") no-repeat 0 0/cover;
}

/*======= logo end ========*/

/*======= nav strat ========*/
#header .nav{
    margin-left:190px;
    line-height: 100px;
    font-size: 16px;
}
#header .nav li{
    margin-right:20px;
}
#header .nav li a{
    color:#333;
}

/*======= nav end ========*/


/*======= nav-list strat ========*/
#header .nav li .nav-list{
    overflow: hidden;
    top:100px;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px 0 #eee;
    transition:0.5s;
    z-index: 997;
}
#header .nav li a:hover + .nav-list{
    height: 223px;
}
#header .nav li .nav-list ul li{
    margin-right: 0;
    padding-top:35px;
    width:204px;
    height:194px;
 
}
#header .nav li .nav-list ul li.pos-r:after{
    content:"";
    position: absolute;
    top: 35px;
    right: 0;
    width:1px;
    height:100px;
    background-color: #e0e0e0;
}
#header .nav li .nav-list ul li img{
    margin-bottom: 16px;
    width: 180px;
}
#header .nav li a:hover{
    color:#333;
}
/*======= nav-list end ========*/


/*======= search start ========*/
#header .search{
    width: 296px;
    height: 50px;
    margin-top: 25px;
    background-color: hotpink;
}
#header .search input{
    height: 50px;
    border: 1px solid #e0e0e0;
}
#header .search [type="search"]{
    width: 244px;
    padding-left:10px;
    outline:none;
}
#header .search [type="search"]:focus{
    border-color: #ff6700;
}
#header .search [type="search"]:focus + [type="submit"]{
    border-color: #ff6700;
}
#header .search [type="search"]:focus ~ .hot-goods{
    display: none;
}
#header .search [type="submit"]{
    width: 52px;
    background-color: #fff;
}
#header .search .iconfont{
    top: 12px;
    right: 16px;
    font-size: 20px;
    font-weight: bold;
}
#header .search [type="submit"]:hover{
    background-color: #ff6700;
    border-color:#ff6700;
}
#header .search [type="submit"]:hover + .iconfont{
    color: #fff;
}
#header .search .hot-goods{
    top: 14px;
    right:62px;
}
#header .search .hot-goods a{
    background-color: #eee;
    color:#757575;
    font-size: 12px;
    padding: 0 4px;
    margin-left: 5px;
}
#header .search .hot-goods a:hover{
    background-color: #ff6700;
    color:#fff;
}
#header .search .search-list{
    z-index: 995;
    display: none;
    top: 49px;
    left: 0;
    width: 242px;
    border: 1px solid #ff6700;
    background-color: #fff;
}
#header .search [type="search"]:focus ~ .search-list{
   display: block;
}
#header .search .search-list a{
    display:block;
    height: 30px;
    padding: 0 14px;
    line-height: 30px;
    font-size: 12px;
    text-indent: 14px;
    color: #424242;  
}
#header .search .search-list a:hover{
    background-color: #fafafa;
}
#header .search .search-list a span{
    color:#b0b0b0;
}
/*======= search end ========*/



/*=================
    HEADER END
==================*/